<template>
  <el-container class="layout-container-demo">
    <!-- 左侧导航-->
    <el-aside width="250px">
      <div class="system-name">BASIN</div>
      <div class="menu-container">
        <el-scrollbar>
          <AuthMenu/>
<!--          <el-menu>-->
<!--            <el-menu-item-group>-->
<!--              <el-menu-item>-->
<!--                <RouterLink to="/menu-manage">菜单管理</RouterLink>-->
<!--              </el-menu-item>-->
<!--              <el-menu-item>-->
<!--                <RouterLink to="/role-manage">角色管理</RouterLink>-->
<!--              </el-menu-item>-->
<!--              <el-menu-item>-->
<!--                <RouterLink to="/employee-manage">员工管理</RouterLink>-->
<!--              </el-menu-item>-->
<!--              <el-menu-item>-->
<!--                <RouterLink to="/config-manage">配置管理</RouterLink>-->
<!--              </el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--          </el-menu>-->
        </el-scrollbar>
      </div>

    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <!--        <div class="toolbar">-->
        <!--          <el-dropdown>-->
        <!--            <el-icon style="margin-right: 8px; margin-top: 1px">-->
        <!--              <setting/>-->
        <!--            </el-icon>-->
        <!--            <template #dropdown>-->
        <!--              <el-dropdown-menu>-->
        <!--                <el-dropdown-item>View</el-dropdown-item>-->
        <!--                <el-dropdown-item>Add</el-dropdown-item>-->
        <!--                <el-dropdown-item>Delete</el-dropdown-item>-->
        <!--              </el-dropdown-menu>-->
        <!--            </template>-->
        <!--          </el-dropdown>-->
        <!--          <span>Tom</span>-->
        <!--        </div>-->
      </el-header>

      <el-main style="height: 714px">
        <el-scrollbar>
          <router-view/>
        </el-scrollbar>
      </el-main>

      <el-footer>
        <!-- 写个版权居中-->
        <div style="text-align: center; margin-top: 10px;">
          <span>2024 Basin. All rights reserved.</span>
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import {RouterLink, RouterView} from 'vue-router'
import {ref} from 'vue'
import AuthMenu from "./components/AuthMenu.vue";

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({length: 20}).fill(item))
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-footer {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}


.layout-container-demo .aside-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 顶部和底部留出空间，用于系统名称和可能的底部内容 */
  height: 100%; /* 确保容器高度 */
  padding: 10px; /* 根据需要调整内边距 */
  box-sizing: border-box; /* 包括内边距和边框在内计算元素的总宽度和高度 */
}

.layout-container-demo .system-name {
  padding-top: 20px;
  font-size: 16px; /* 或其他合适的字体大小 */
  font-weight: bold; /* 可选：加粗字体 */
  text-align: center; /* 水平居中 */
  width: 100%; /* 占据整个容器宽度 */
  margin-bottom: 16px; /* 与菜单项之间的间距 */
}

.layout-container-demo .menu-container {
  flex-grow: 1; /* 使菜单容器占据剩余空间 */
  width: 100%; /* 确保宽度为100% */
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
